<template>
    <div>
		<headerSearch :title="headerTitle" :searchBack="true"></headerSearch>
        <div class="content" style="margin-bottom: 0;">
            <!-- 导航 -->
            <swiper :options="swiperOption" class="subheader-bar__container">
                <swiper-slide 
                
                @click.native="selectTab(pType)" 
                class="subheader-bar__item" 
                v-for="pType in pTypes" 
                :key="pType.id"
                >
                {{pType.name}}
                </swiper-slide>
            </swiper>
            <!-- 海报排版 -->
            <div class="main-smart-poster">
                <ul class="clear">
                    <li v-for="(list, i) in lists" :key="i" @click="postereditor" style="padding-bottom: 0.3rem;">
                        <img :src="list.src" alt="">
                        <span><i class="iconfont icon-bianji"></i></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import { swiper, swiperSlide } from "vue-awesome-swiper";
    export default {
        data() {
            return {
                headerTitle: '智能海报',
                swiperOption: {
                    slidesPerView: 8,
                    paginationClickable: true,
                    freeMode: true
                },
                pTypes: [
                    { name: '全部' },
                    { name: '节日' },
                    { name: '活动' },
                    { name: '邀请' },
                    { name: '促销' },
                    { name: '通知' },
                    { name: '电商' },
                    { name: '校园' },
                ],
                // selectId: 8,
                query: {
                    type: 0
                },
                lists: [
                    { src: require('../common/images/cindex_09.jpg') },
                    { src: require('../common/images/cindex_09.jpg') },
                    { src: require('../common/images/cindex_09.jpg') },
                ]
            }
        },
        methods: {
            // 选中某个类型
            selectTab(type) {
                this.$router.push({
                    path: "",
                    query: {
                        type: type.id
                    }
                });
            },
            postereditor() {
                this.$router.push({
                    path: '/posterEditor'
                })
            }
        },
        components: {
            headerSearch,
            swiper,
            swiperSlide
        },
    }
</script>

<style>
.subheader-bar__container {
    position: fixed;
    left: 0;
    width: 100%;
    height: 0.88rem;
    background-color: #fff;
    display: flex;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    line-height: 0.88rem;
    text-align: center;
    font-size: 0.28rem;
    z-index: 1;
    border-bottom: 1px solid #d8d8d8;
}
.subheader-bar__item {
    display: inline-block;
    word-break: keep-all;
    text-align: center;
    width: 0.93rem;
    min-width: 0.93rem;
    font-size: 0.28rem;
    color: #333;
}
.subheader-bar__item:hover,
.subheader-bar__item:active {
      color: #e50838;
      font-weight: bold;
      box-sizing: border-box;
      border-bottom: 2px solid #e50838;
}

/* 海报排版 */
.main-smart-poster {
    margin-top: 1.08rem;
}
.main-smart-poster ul {
    margin: 0;
    padding: 0 .2rem;
    box-sizing: border-box;
    overflow: hidden;
}
.main-smart-poster ul>li {
    float: left;
    width: 3.45rem;
    margin-right: .1rem;
    box-sizing: border-box;
    position: relative;
}
.main-smart-poster ul>li img {
    width: 3.45rem;
    display: block;
}
.main-smart-poster ul>li span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #e50838;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    line-height: 0.6rem;
    text-align: center;
}
.main-smart-poster ul>li .icon-bianji {
    font-size: 0.48rem;
    color: #fff;
}

</style>